昨天，我們已經把Vue切出來的版給套用到我們的浮動頁面了，

所以今天要寫的就是商業邏輯的部分，先暫定要給後台腳本的資料格式以及要從後台腳本取得什麼資料，

先看一下UI畫面，再想一下要用的資料

老樣子,先宣告Vue物件

var app = new Vue({
    el: '#app',
})

並且宣告需要的資料，並且綁上v-model

main.js

data() {
    return {
        currentPage: 'time', //當前頁面
        trainList: [   //站點清單
            {
                id: '0900',
                name: '基隆'
            },
            {
                id: '0930',
                name: '七堵'
            },
            {
                id: '0980',
                name: '南港'
            }
        ],
        searchForm: {
            startStation: '', //起始站
            endStation: '',   //終點站
            isTransfer: false, // 是否接受轉乘,默認直達
            rideDate: '', // YYYY/MM/DD 查詢日期
            startTime: '00:00', // hh:mm 開始時間
            endTime: '23:59', // hh:mm 結束時間
            timeType: 'departure', // departure 或 arrival 時間類型
            checkType: '', // all 或 checkmark 或 non-checkmark
            singleStation: '', //單一車站
            trainNo: '' // 列車編號
        },
        dataService: null //後台腳本物件
    }
},

時間的部分就用computed完成就好了

computed: {
  timeOptions(){
    let times = []
    for(var n = 0 ; n<24 ; n++){
      if(n<10){
        times.push(`0${n}:00`)
        times.push(`0${n}:30`)
      }else{
        times.push(`${n}:00`)
        times.push(`${n}:30`)
      }
    }
    times.push('23:59')
    return times
  }
}

popup.html

<div>
  <div class="row" v-show="currentPage === 'time'">
      <label>出發站</label>
      <select v-model="searchForm.startStation">
          <option v-for="(item,index) in trainList" :key="'train-'+index">{{item.id + '-' + item.name}}</option>
      </select>
  </div>
  <div class="row" v-show="currentPage === 'time'">
      <label>抵達站</label>
      <select v-model="searchForm.endStation">
          <option v-for="(item,index) in trainList" :key="'train-'+index">{{item.id + '-' + item.name}}</option>
      </select>
  </div>
  <div class="row">
      <label>查詢日期</label>
      <input type="date" v-model="searchForm.rideDate" />
  </div>
  <div class="row">
      <label>時間類型</label>
      <div class="input-grid">
      <input type="radio" value="departure" v-model="searchForm.timeType" />出發時間
      <input type="radio" value="arrival" v-model="searchForm.timeType" />抵達時間
      </div>
  </div>
  <div class="row" v-show="currentPage === 'time'">
      <label>查詢時間</label>
      <select class="time" v-model="searchForm.startTime">
          <option v-for="item in timeOptions" :value="item">{{item}}</option>
      </select>
       ~ 
      <select class="time" v-model="searchForm.endTime">
          <option v-for="item in timeOptions" :value="item">{{item}}</option>
      </select>
  </div>
  <div class="row" v-show="currentPage === 'station'">
      <label>查詢車站</label>
      <select v-model="searchForm.singleStation"></select>
  </div>
  <div class="row" v-show="currentPage === 'trainno'">
      <label>查詢車次</label>
      <input type="text" v-model="searchForm.trainNo" />
  </div>
  <div class="row" v-show="currentPage === 'time'">
      <label>車種</label>
      <div class="input-grid">
          <input type="radio" value="all" v-model="searchForm.checkType" />全部
          <input type="radio" value="checkmark" v-model="searchForm.checkType" />對號 
          <input type="radio" value="non-checkmark" v-model="searchForm.checkType" />非對號
      </div>
  </div>
  <div class="row">
      <div class="btn btn-blue" @click="submitSearch">查詢</div>
      <div class="btn btn-white">初始化</div>
  </div>
</div>

接下來我們要先把後台腳本引入vue物件中，先假設後台腳本有宣告一個 Class trainManager

mounted(){
  chrome.runtime.getBackgroundPage(background=>{
    this.dataService = background.trainManager
  })
}

再來就是我們的函數了，基本上只需要送出跟清除兩個功能

methods: {
    switchPage(page) {
        this.currentPage = page
    },
    submitSearch() {
        switch (currentPage) {
            case 'time':
                this.dataService.searchByTime(this.searchForm)
                break
            case 'station':
                this.dataService.searchByStation(this.searchForm)
                break
            case 'trainno':
                this.dataService.searchByTrainNo(this.searchForm)
                break
        }
        //關閉popup.html
        window.close()
    },
    clearCondition(){
        //do something...
    }
}

登登，完美達成，明天再把後台管理完成就可以開始查詢台鐵時刻囉！